<!DOCTYPE html>
<html>
<head>
    <title>Light Blue - echarts</title>
    <link href="css/application.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.png">
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="../lightblue/js/echarts.js"></script>
    <script src="../lightblue/js/dark.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="widget">
    <div id="main" style="width: 600px;height:400px;"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'),'dark');

    // 指定图表的配置项和数据
    option = {
        title : {
            text : '稳压器设备',
            subtext : '输出频率(MHz)',
            left:'center'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                magicType: {type: ['line', 'bar']},
                dataView : {show: true, readOnly: false}
            }
        },
        dataZoom: {
            show: true,
            start : 70
        },
        legend : {
            data:['输出频率A','输出频率B'],
            x:'left'
        },
        grid: {
            y2: 80
        },
        xAxis : [
            {
                type : 'time',
                splitNumber:10
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name: '输出频率A',
                type: 'line',
                showAllSymbol: true,
                symbolSize: function (value){
                    return Math.round(value[2]/10) + 2;
                },
                data: (function () {
                    var d = [];
                    var len = 0;
                    var now = new Date();
                    var value;
                    while (len++ < 60) {
                        d.push([
                            new Date(2014, 9, 1, 0, len * 10000),
                            (Math.random()*30).toFixed(2) - 0,
                            (Math.random()*100).toFixed(2) - 0
                        ]);
                    }
                    return d;
                })()
            },
            {
                name: '输出频率B',
                type: 'line',
                showAllSymbol: true,
                symbolSize: function (value){
                    return Math.round(value[2]/10) + 2;
                },
                data: (function () {
                    var d = [];
                    var len = 0;
                    var now = new Date();
                    var value;
                    while (len++ < 60) {
                        d.push([
                            new Date(2014, 9, 1, 0, len * 10000),
                            (Math.random()*30).toFixed(2) - 0,
                            (Math.random()*100).toFixed(2) - 0
                        ]);
                    }
                    return d;
                })()
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>